<template>
  <div
    class="w-full h-full flex flex-col justify-center items-center bg-gray-100"
  >
    <div class="w-full h-full flex flex-col md:w-[63%] md:h-[92%]">
      <Header />
      <div class="md:w-full md:h-full flex-1 w-full flex flex-row">
        <div
          class="chat-container md:w-[65%] w-full max-w-[100%] flex-none grow bg-[#F2F2F2] flex flex-col"
        >
          <!-- 公告 -->
          <AsyncNotice
            v-model:visible="noticeVisible"
            v-if="AsyncNotice"
            :text="notice"
            @close="closeNotice"
          />
          <!-- 聊天框滚动区域 -->
          <ChatContainer />
          <!-- 高频关键词 -->
          <HighFrequencyKeywords :hotWords="hotWordList" />
          <!-- 输入框 -->
          <div class="action-area w-full h-auto" v-on-click-outside="closeModal">
            <InputFiled
              ref="inputRef"
              @emoji="handleOpenEmoji"
              @file="handleOpenFile"
            />
            <!-- 发送文件和表情 -->
            <div class="w-full bg-[#E5E5E5] transition-transform">
              <File v-model:visible="fileTools"></File>
              <Emoji
                v-model:visible="emojiTools"
                @emoji-text="handleEmoji"
              ></Emoji>
            </div>
          </div>
        </div>
        <div
          class="tool-container flex-none basis-[32%] hidden md:block bg-[#FFFFFF]"
        ></div>
      </div>
    </div>
    <!-- 强认证 -->
    <Auth v-model:visible="visible" @success="success" />
  </div>
</template>
<script setup lang="ts">
  import type { hotwords } from '#/request'
  import useChannel from '@/hooks/useChannel'
  import useNotice from '@/hooks/useNotice'
  import { authState } from '@/plugins/constants'
  import { createMeeting } from '@/plugins/session'
  import { requestUploadConfig, requestUploadFileConfig } from '@/service'
  import { useChannelStore } from '@/store/channel'
  import { useSessionStore } from '@/store/session'
  import { vOnClickOutside } from '@vueuse/components'
  import { filter } from 'lodash'
  import { defineAsyncComponent, onMounted, ref } from 'vue'
  import { useRoute } from 'vue-router'
  import ChatContainer from "@/components/ChatContainer.vue";
  import HighFrequencyKeywords from "@/components/HighFrequencyKeywords.vue";
  import InputFiled from "@/components/InputFiled.vue";
  import File from "@/components/Tools/File.vue";
  import Emoji from "@/components/Tools/Emoji.vue";
  import Auth from "@/components/Auth.vue";
  const channel = useChannelStore()
  const inputRef = ref()
  const route = useRoute()
  const { configId } = route.query
  const noticeVisible = ref<boolean>(true)
  let AsyncNotice: any = null
  const session = useSessionStore()
  // 初始化全局状态
  // session.initState()
  session.updateConfigId(configId)
  const visible = ref(false)
  const fileTools = ref(false)
  const emojiTools = ref(false)
  // 公告
  const { notice } = useNotice(configId, () => {
    AsyncNotice = defineAsyncComponent(() => import('@/components/Notice.vue'))
  })
  const hotWordList = ref<hotwords[]>([])
  onMounted(async () => {
    // 渠道基础信息
    const { hotWords, strongAuth } = await useChannel(configId)
    // 开启强认证
    if (strongAuth) {
      if (session.auth === authState.uncompleted) {
        // 强认证未完成
        visible.value = true
        hotWordList.value = hotWords.value
      } else {
        // 强认证完成
        visible.value = false
        hotWordList.value = hotWords.value
        await createMeeting('init')
      }
    } else {
      // 未开启强认证
      visible.value = false
      hotWordList.value = hotWords.value
      await createMeeting('init')
    }
    // 获取上传文件配置
    const uploadConfig: any = await requestUploadConfig()
    const uploadFileConfig: any = await requestUploadFileConfig({
      module: 'fsCenter_onLine',
      size: 1000,
    })
    if (uploadFileConfig.code === 0 && uploadFileConfig.data.total > 0) {
      const onlineConfig = filter(uploadFileConfig.data.records, (item) => {
        return (
          item.scene === 'fsCenter_onLine_appSendFile' || item.scene === 'all'
        )
      })
      const configList = onlineConfig.map((item) => {
        channel.setUploadType(item.fileType)
        return {
          scene: item.scene,
          fileType: item.fileType.split(','),
          maxFileSize: item.maxSize,
        }
      })
      channel.setUpload(configList)
    } else {
      channel.setUploadType(uploadConfig.data.fileType)
      channel.setUpload([
        {
          scene: 'fsCenter_onLine_appSendFile',
          fileType: uploadConfig.data.fileType.split(','),
          maxFileSize: uploadConfig.data.maxFileSize,
        },
      ])
    }
    console.log('uploadFileConfig', uploadFileConfig)
  })
  // 强认证成功
  function success() {
    createMeeting('init')
  }
  function closeNotice() {
    noticeVisible.value = false
  }
  // 打开移动端工具栏
  function handleOpenEmoji() {
    emojiTools.value = !emojiTools.value
    fileTools.value = false
  }
  function handleOpenFile() {
    fileTools.value = !fileTools.value
    emojiTools.value = false
  }
  function handleEmoji(event) {
    inputRef.value.insetEmoji(event.i)
  }
  const closeModal = () => {
    fileTools.value = false
    emojiTools.value = false
  }
</script>

<style lang="less" scoped></style>
